<template>
  <!-- 搜索框 -->
  <view>
    <uni-search-bar @confirm="searchData" placeholder="搜索商品名称" :radius="100" v-model="dvForm.name" cancelButton="none"></uni-search-bar>
  </view>

  <!-- 排序栏 -->
  <view class="shop-list">
    <view class="shop-title f-color">
      <view class="shop-item" v-for="(item, index) in shopList.data" :key="index" @tap="changeTab(index)">
        <view :class="shopList.currentIndex == index ? 'f-active-color' : ''">{{ item.name }}</view>

        <view v-if="item.code != 'all'">
          <uni-icons type="up" size="10" class="iconfont icon-shangjiantou"
            :color="item.status === 1 ? 'red' : ''"></uni-icons>
          <uni-icons type="down" size="10" class="iconfont icon-xiajiantou"
            :color="item.status === 2 ? 'red' : ''"></uni-icons>
        </view>
      </view>
      <view>
        <image style="width: 20px; height: 20px; margin-right: 20px;" @click="changeShowType"
          :src="showType == 2 ? '../../static/goodsList/showMore.png' : '../../static/goodsList/showOne.png'"
          mode="scaleToFill" />
      </view>
    </view>
  </view>

  <!-- 商品列表 -->
  <view>
    <uni-grid :column="2" v-if="showType == 2" v-for="(item, index) in goodsData" :key="index">
      <uni-grid-item class="daynew-swiper-item" v-if="index % 2 == 0">
        <image :src="getImgFullUrl(goodsData[index].imgs)" class="daynew-item-img" mode="aspectFill" />
        <text class="">{{ goodsData[index].name }}</text>
        <text class="">{{ goodsData[index].price }}</text>
      </uni-grid-item>
      <uni-grid-item class="daynew-swiper-item" v-if="index % 2 == 0 && index + 1 < goodsData.length">
        <image :src="getImgFullUrl(goodsData[index + 1].imgs)" class="daynew-item-img" mode="aspectFill" />
        <text class="">{{ goodsData[index + 1].name }}</text>
        <text class="">{{ goodsData[index + 1].price }}</text>
      </uni-grid-item>
    </uni-grid>

    <uni-list v-if="showType == 1" v-for="(item, index) in goodsData " :key="item.id">
      <uni-list-item :title="item.name" :note="item.price" :thumb="getImgFullUrl(item.imgs)" thumb-size="lg"
        rightText="购买" />
    </uni-list>

  </view>

</template>


<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { getGoodsPage } from "@/api/shopping";
import { iPagination } from "@/interface";
import { onLoad } from '@dcloudio/uni-app'
import { getMapBy, readImgUrl } from "@/api/comm";

// 获取图片全路径  [错误写法：const getImgFullUrl = computed((imgName: string) => readImgUrl + imgName)   ]
const getImgFullUrl = computed(() => {
  return (imgName: string) => imgName ? readImgUrl + imgName : ''
})


// 列表展示形式
const showType = ref(2);
// 列表展示形式-切换
const changeShowType = () => {
  if (showType.value === 1) {
    showType.value = 2;
  } else {
    showType.value = 1;
  }
  // console.log(showType.value)
  // goodsData.value.push({ name: 'sp4' })
}

// 排序数据
const shopList = ref({
  currentIndex: 0,
  data: [
    { code: "all", name: "综合", status: 1 },
    { code: "price", name: "价格", status: 0 },
    { code: "sellNum", name: "销量", status: 0 }
  ]
})

// 排序数据-切换
const changeTab = (index: number) => {
  // ======操作旧tab
  // 切换前的索引值（index 为当前点击的索引值）
  let oldIndex = shopList.value.currentIndex;
  let oldItem = shopList.value.data[oldIndex]
  if (oldIndex == index) {
    oldItem.status = oldItem.status === 1 ? 2 : 1;

  } else {
    oldItem.status = 0;
    // ======操作新tab
    shopList.value.currentIndex = index;
    let newItem = shopList.value.data[index]
    newItem.status = 1;
  }
  let optItem = shopList.value.data[index]
  if(optItem){
    dvForm.sortCode = optItem.code;
    dvForm.sortType = optItem.status==2?'desc':'asc';
  }
  searchDataForSort();
}

// 查询商品名称
const dvForm = reactive({
  name: '',
  sortCode: '',
  sortType:''
});

// 商品集合
const goodsData = ref([{
  id: 0,
  code: "",
  name: "",
  dictType: -1,
  dictTypeName: "",
  price: 0.00,
  discountPrice: 0.00,
  imgs: "",
  remark: "",
  buyNum: 0,
  packageFlag: 0,
}]);
const maxNumFlag = ref(false) // 是否已是最大数据
// 分页对象
const pageModel = ref<iPagination>({
  pageSize: 12,
  total: 1,
  current: 1,
  showQuickJumper: false,
  showSizeChanger: true,
  showTotal: (total: number) => `共${total}条`,
})
// 临时中转商品集合（滚动加载更多）
const data = ref([]);

// 搜索框查询
function searchData(){
  maxNumFlag.value = false;
  pageModel.value.current=1;
  data.value = [];
  goodsData.value = [];
  searchGoods();
}

// 排序查询
function searchDataForSort(){
  maxNumFlag.value = false;
  pageModel.value.current=1;
  data.value = [];
  goodsData.value = [];
  searchGoods();
}


// 商品查询
function searchGoods() {

  let params = {
    pageNum: pageModel.value.current,
    pageSize: pageModel.value.pageSize,
  }
  if (maxNumFlag.value === true) {
    return;
  }
  getGoodsPage(params, dvForm)?.then((resp: any) => {
    if (0 == resp.code) {
      if (resp.data.records) {
        const newData = data.value.concat(resp.data.records);
        data.value = newData;
        goodsData.value = newData;

        if (resp.data.total === goodsData.value.length) {
          maxNumFlag.value = true;
        }
        // console.log("已加载数量：" + goodsData.value.length + "  总数量：" + resp.data.total + " maxNumFlag：" + maxNumFlag.value)
      }
    }
    else {
      console.error(resp.msg)
    }
  })

}

onLoad(() => {
  // 商品查询
  searchGoods();
})


</script>

<style lang="less" scoped>
.daynew-swiper {
  height: 200px;
}

.daynew-swiper-item {
  padding: 5px;
  border: none;
}

.daynew-item-img {
  // display: inline-block;
  width: 100%;
  height: 180px;
}

.shop-title {
  display: flex
}

.shop-item {
  flex: 1;
  display: flex;
  justify-content: center;
  // alian-items: center;
}

.iconfont {
  margin: 0 5px;
  display: flex;
  // transition: transform 0.3s;
}

.icon-shangjiantou {
  // display: flex;
}

.icon-xiajiantou {
  // transform: rotate(0deg);
  // margin-top: 10px;
  // margin-left: -18px;
}

.f-color {
  color: #636263;
}

.f-active-color {
  color: #49BDFB;
  // color: red;
}

.bg-color {
  background-color: #42B7FB;
}
</style>